<script setup>
import { editField, delField } from '@/api/equipment/fields'
const props = defineProps({
  field: Object,
})
const emit = defineEmits(['refeshFieldList'])
function handleEditField() {
  console.log(props.field.id)
  ElMessageBox.prompt('请输入修改后的字段名称', 'Tip', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
  })
    .then(async (value) => {
      await editField(props.field.id, value.value, props.field.type).then(
        res => {
          console.log(res.data)
          if (res.data.success) {
            ElMessage.success(res.data.data)
            emit('refeshFieldList')
          } else {
            ElMessage.error(res.data.data)
          }
        })
    })
}
async function handleDelField() {
  await delField(props.field.id)
  emit('refeshFieldList')
}
</script>

<template>
  <div class="card">
    <el-row>
      <el-col :span="17"><el-text size="large" tag="b">
          <slot></slot>
        </el-text></el-col>
      <el-col :span="7">
        <el-icon color="var(--el-color-primary)" @click="handleEditField">
          <Edit />
        </el-icon>
        <el-popconfirm title="是否确认删除?" @confirm="handleDelField">
          <template #reference>
            <el-icon color="red" style="margin-left: 10px;">
              <Delete />
            </el-icon>
          </template>
        </el-popconfirm>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="17"><el-text>已使用设备数</el-text></el-col>
      <el-col :span="7"><el-text type="primary" tag="b" size="large">7</el-text></el-col>
    </el-row>
  </div>
</template>

<style scoped lang="less">
.card {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 180px;
  height: 70px;
  padding: 10px 20px;
  border: grey 1px solid;
  border-radius: 10px;
  background-color: var(--el-border-color-extra-light);

  .el-icon {
    cursor: pointer;
    vertical-align: middle;
  }
}
</style>